<template>
	<!-- index==flowData.clickIndex[0]&&j==flowData.clickIndex[1] -->
	<view class="waterfall-item" @mouseenter.stop="rgrea" @mouseleave="rgre">
		<view :class="hover?'list-item list-item_hover':'list-item'">
			<view class="list-image">
				<uv-image :lazyLoad="false" webp :customStyle="{'width': '100%'}"
					:class="isPc?'img_tip img_tip_pc':'img_tip img_tip_os'" :src="imageState(item)" mode="widthFix"
					@load="load" @error="error">
					<template v-slot:loading>
						<uv-skeleton title titleWidth="100%" titleHeight="300"></uv-skeleton>
						<!-- <view class="skeleton-placeholder"
							style="aspect-ratio: 1;background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size: 200% 100%;animation: loading 1.5s infinite;">
						</view> -->
					</template>
				</uv-image>
				<view v-if="hover" class="float-mask cursor-pointer" @click="floatMask(item)">
				</view>
				<view class="float-top">
					<view v-for="(ite,ind) in tabbar" :key="ind">
						<view v-if="ite.en=='chuangfa'">
							<view v-for="(it,is) in ite.children" :key="is+JSON.stringify(it)">
								<view v-if="it.icon=='creation'&&item.type!='fusion'" v-for="(ie,ic) in it.children"
									:key="ie+JSON.stringify(ie)">
									<uv-icon v-if="item.type==ie.en" color="#eeeeee" :size="isPc?25:20"
										:name="ie.icon"></uv-icon>
								</view>
								<view v-if="it.icon=='release'&&item.type=='fusion'" v-for="(ie,ic) in it.children"
									:key="ie+JSON.stringify(ie)">
									<uv-icon v-if="item.task.api==ie.en" color="#eeeeee" :size="isPc?25:20"
										:name="'/static/level3/'+ie.pic+'.svg'"></uv-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="float-button" v-if="hover">
					<view
						style="display: flex;flex-direction: row-reverse;justify-content: space-between;align-items: center;">
						<view style="display: flex;">
							<links style="margin-right:10px" :class="isPc?'linkStyle linkPc':'linkStyle linkOs'"
								:iconStyle="isPc?'font-size: 28px;color:#353535':'font-size: 22px;color:#353535'"
								icon="attach" title="" v-model="flowData[`column_${index + 1}`][j]">
							</links>
							<sharePoster @shareShow="e=>shareShow = e" :url="'/pages/index/details'"
								:class="isPc?'posterStyle posterPc':'posterStyle posterOS'"
								:iconStyle="isPc?'font-size: 28px;color:#353535':'font-size: 22px;color:#353535'"
								prefixIcon="share-fill" title="" v-model="flowData[`column_${index + 1}`][j]">
							</sharePoster>
						</view>
						<view v-if="!ifShow(item)" :class="isPc?'same_style same_pc':'same_style same_os'"
							:style="isPc?'font-size: 17px;':'font-size: 15px;'"
							@click="routed('/pages/' + item.type + '/index?id=' + item.sid)">一键同款
						</view>
					</view>
				</view>
			</view>
			<view class="list-button">
				<view v-if="item.name||item.title" style="font-size: 15px;color:#333">
					{{item.name}}{{item.title}}
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view
						style="margin: 8px 0px;display: flex;justify-content: flex-start;align-items: center;overflow: hidden;">
						<uv-avatar :src="item.userinfo[0].portrait" size="20"></uv-avatar>
						<view class="tit_tip one-line-omit">{{ item.userinfo[0].nickname }}
						</view>
					</view>
					<view @click="heartlike(item)" style="display: flex;justify-content: flex-end;cursor: pointer;">
						<uv-icon size="18" :name="item.likeStatus?'thumb-up-fill':'thumb-up'"></uv-icon>
						<!-- <uv-text :text="item.likes"></uv-text> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar.vue';
	import config from '@/common/config';
	import sharePoster from '@/components/sharePoster/sharePoster.vue';
	import links from '@/components/links/links.vue';
	import {
		like,
	} from '@/common/api.js';
	import {
		uv_image,
	} from '@/common/fun.js';
	export default {
		props: {
			flowData: Object,
			item: Object,
			index: Number,
			j: Number,
		},
		components: {
			// 注册组件
			tabbars,
			sharePoster,
			links
		},
		data() {
			return {
				tabbar: config.tabbar,
				shareShow: false,
				shareIndex: false,
				hover: false,
				nOarr: ["article"],
			}
		},
		computed: {
			infiniteScrollDistance() {
				return uni.$uv.sys().screenHeight > 500 ? uni.$uv.sys().screenHeight : 500;
			},
			columnStyle() {
				return index => ({
					width: `calc(${100/this.flowData.column}% - 1%)`,
				});
			},
			CalcW() {
				return `${this.flowData.column}` > 3;
			},

		},
		watch: {
			'flowData.hoverIndex'(newVal) {
				var that = this;
			},
			shareShow(newVal) {
				if (!newVal) this.hover = false;
			},
			// index(newVal) {
			// 	if(newVal) this.hover = false;
			// }
			// index: Number,
			// j: Number,
		},
		mounted() {},
		methods: {
			ifShow(item) {
				if (this.nOarr.includes(item.type.toLowerCase())) {
					return true;
				}
				if (this.nOarr.includes(item.task.api.toLowerCase())) {
					return true;
				}
				return false
			},
			floatMask(e) {
				if (this.isPc) {
					!this.shareShow && this.routed('/pages/index/details?id=' + e._id);
				} else {
					this.shareIndex && !this.shareShow && this.routed('/pages/index/details?id=' + e
						._id);
				}
			},
			rgrea(e) {
				if (this.shareShow == false) {
					this.hover = true;
				}
				var that = this;
				setTimeout(function() {
					that.shareIndex = true;
				}, 500);
			},
			rgre(e) {
				this.shareIndex = false;
				if (this.shareShow) return;
				this.hover = false;
			},
			// 点赞/取消点赞
			async heartlike(comment) {
				try {
					// 先更新UI状态
					comment.likeStatus = !comment.likeStatus;
					comment.likes = comment.likeStatus ? comment.likes + 1 : Math.max(0, comment.likes - 1);

					// 发送请求到后端
					await like({
						id: comment._id
					}, {
						custom: {
							auth: true,
							toast: true
						}
					})
				} catch (e) {
					// 失败则回退状态
					comment.likeStatus = !comment.likeStatus;
					comment.likes = comment.likeStatus ? comment.likes + 1 : Math.max(0, comment.likes - 1);

					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
				}
			},

			// uv_image(e) {
			// 	let src = "/",
			// 		con = null;
			// 	if (e.content && e.content[0]) {
			// 		con = e.content[0];
			// 	}
			// 	if (e.content && e.content[1]) {
			// 		con = e.content[1];
			// 	}
			// 	if (con?.cover) {
			// 		src = con.cover
			// 	}
			// 	if (con?.data && con?.data[0]) {
			// 		src = con.data[0].url
			// 	}
			// 	if (con?.imageUrl) {
			// 		src = con.imageUrl
			// 	}
			// 	if (con?.videoFirstFrame) {
			// 		src = con.videoFirstFrame
			// 	}
			// 	if (con?.targetImage) {
			// 		src = con.targetImage
			// 	}
			// 	if (con?.images) {
			// 		src = con.images[0]
			// 	}
			// 	if (con?.url) {
			// 		src = con.url
			// 	}
			// 	if (con?.musics) {
			// 		src = con.musics[0].imageUrl
			// 	}
			// 	if (src != '/') {
			// 		if (uni.$uv.os() === 'ios' || uni.$uv.os() === 'android') {
			// 			src = src + '?x-oss-process=image/resize,w_250,m_lfit/format,webp'
			// 		} else {
			// 			src = src + '?x-oss-process=image/resize,w_400,m_lfit/format,webp'
			// 		}
			// 	}
			// 	return src;
			// },
			uv_image,
			imageState(item) {
				if (item?.cover) {
					return item.cover;
				}
				if (item.type == 'fusion') {
					return this.getImgSrc(item.content[0])[0];
				} else {
					let img = uv_image(item);
					// console.log(this.img);
					return img;
				}
			},
			getImgSrc(richtext) {
				let imgList = [];
				if (richtext) richtext.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
					imgList.push(capture + '?x-oss-process=image/resize,w_300,m_lfit/format,webp');
				});
				if (!imgList[0]) {
					imgList = ["/"];
				}
				return imgList;
			},

			/* 图片加载完成 */
			load(e) {
				this.$emit('load', e);
			},
			/* 图片加载失败 */
			error(e) {
				this.$emit('error', e);
			},
			routed(url = '') {
				if (!url) return;
				uni.$uv.route({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.waterfall-item {
		$borderRadius: 25rpx;
		width: 100%;
		margin-bottom: 0px;
		padding: 0px;
		border-radius: $borderRadius;
		overflow: hidden;
		transition: transform 0.3s ease-in-out;

		.list-item {
			padding-bottom: 5px;
			border-radius: $borderRadius;
		}

		.list-image {
			width: 100%;
			border-radius: $borderRadius;
			position: relative;
			overflow: hidden;
			transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

			.img_tip {
				width: 100%;
				border-radius: $borderRadius;
				transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}

			::v-deep .uv-image__error {
				width: 100% !important;
			}

			.img_tip_pc {
				min-height: 350rpx;

				::v-deep .uv-image__error {
					height: 350rpx !important;
				}
			}

			.img_tip_os {
				min-height: 200rpx;

				::v-deep .uv-image__error {
					height: 200rpx !important;
				}
			}

			.float-mask {
				position: absolute;
				overflow: hidden;
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				background-color: rgba(0, 0, 0, 0.15);
			}

			.float-top {
				position: absolute;
				overflow: hidden;
				top: 10px;
				left: 10px;
				border-radius: 5px;
				background-color: rgba(0, 0, 0, 0.35);
				padding: 1px;

			}

			.float-button {
				width: calc(100% - 20px);
				position: absolute;
				overflow: hidden;
				bottom: 10px;
				left: 10px;
				border-radius: 5px;
				// background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));


				.same_style {
					color: white;
					cursor: pointer;
					border-radius: 20px;
					background-color: #C6000B;
				}

				.same_pc {
					padding: 5px 15px 10px;
				}

				.same_os {
					padding: 4px 10px 6px;
				}

				.linkStyle {
					cursor: pointer;
					background-color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
				}

				.linkPc {
					width: 35px !important;
					height: 35px !important;
				}

				.linkOS {
					padding: 2px !important;
					width: 26px !important;
					height: 26px !important;
				}

				.posterStyle {
					background-color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
				}

				.posterPc {
					width: 35px !important;
					height: 35px !important;
				}

				.posterOS {
					padding: 2px !important;
					width: 26px !important;
					height: 26px !important;
				}
			}
		}

		.list-button {
			margin-top: 4px;
			padding: 0px 10px;

			.title_tip {
				text-align: justify;
				font-size: 14px;
				margin-bottom: 10rpx;
				color: #333;
			}

			.tit_tip {
				text-align: justify;
				font-size: 14px;
				margin-left: 3px;
			}
		}


		.list-item_hover {
			background: rgba(0, 46, 37, 0.1);
			box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.1);

			.img_tip {
				transform: scale(1.1);
				transition: transform 0.1s ease;
			}

		}

		.list-item_click {
			background: rgba(0, 46, 37, 0.15);
			box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.15);

			.float-mask {
				background-color: rgba(0, 0, 0, 0.3);
			}

			.list-image {
				.img_tip {
					transform: scale(1.15);
					transition: transform 0.1s ease;
				}
			}

		}
	}

	/* 多行省略 */
	.multi-line-omit {
		word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
		text-overflow: ellipsis; // 溢出用省略号显示
		overflow: hidden; // 超出的文本隐藏
		display: -webkit-box; // 作为弹性伸缩盒子模型显示
		-webkit-line-clamp: 2; // 显示的行
		-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
	}

	/* 单行省略 */
	.one-line-omit {
		width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
		white-space: nowrap; // 溢出不换行
		overflow: hidden; // 超出的文本隐藏
		text-overflow: ellipsis; // 溢出用省略号显示
	}
</style>